<template>
    <div v-loading.body="imgCropload" class="imgCropBox flex flex-align-center flex-pack-center">
        <div class="imgCrop" id="imgCrop">
            <div class="title">图片裁剪</div>
            <div class="oldImgBox clearfix">
                <div class="oldImg left flex flex-align-center flex-pack-center">
                    <img :src="oldImg" alt="原图片" id="targetImg">
                </div>
            </div>

            <div class="btnGroup">
                <button type="button" class="cancel" @click="closeCrop">取消</button>
                <button type="button" class="save" @click="save">保存</button>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import {API_BASE_URL} from "./../../urlConfig/index";
    export default{
        /* 
            oldImg 传入图片base64
            showCrop 控制显示隐藏
            curCropW 需要图片宽度
            curCropH 需要图片高度
        */
        props: ['oldImg', 'curCropW', 'curCropH', 'storeId'],
    	data () {
    		return {
                cropImg: '', // 剪切后图片base64

                startX: '', // 图片裁剪的开始x坐标
                startY: '', // 图片裁剪的开始y坐标
                imgWidth: '', // 图片裁剪宽度
                imgHeight: '', // 图片裁剪高度
                ratio: '', // 图片缩放比例
                imgCropload: false
    		}
    	},
        watch: {
            oldImg: function ( newVal, oldVal ) {
                let img = new Image();
                img.src = newVal;
                if ( img.width/img.height > 4/3 ) {
                    $('#targetImg').width(400);
                    this.ratio = img.width/400;
                } else {
                    $('#targetImg').height(300);
                    this.ratio = img.height/300;
                }
                setTimeout(()=>{
                    this.handleJcrop();
                },500);
            }
        },
        methods: {
            // 保存图片裁剪
            save: function () {
                // 判断如果没有裁剪就返回整个图片
                this.imgCropload = true;
                if ( !this.startX && !this.imgWidth ) {
                    this.$http.post(API_BASE_URL+'v1/image/json/upload?storeId='+this.storeId, {file: this.oldImg}).then((res)=>{
                        this.$emit('getCropImgBase', res.data.path);
                        this.closeCrop();
                    }).catch(()=>{
                        this.closeCrop();
                    });
                    return;
                }

                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext("2d");

                let img = new Image();
                img.setAttribute('crossOrigin', 'anonymous');
                img.src = this.oldImg;
                img.onload = ()=>{
                    canvas.width = this.curCropW;
                    canvas.height = this.curCropH;
                    ctx.drawImage(img, this.ratio*this.startX, this.ratio*this.startY, this.ratio*this.imgWidth, this.ratio*this.imgHeight, 0, 0, this.curCropW, this.curCropH);
                    this.$http.post(API_BASE_URL+'v1/image/json/upload?storeId='+this.storeId, {file: canvas.toDataURL()}).then((res)=>{
                        this.$emit('getCropImgBase', res.data.path);
                        this.closeCrop();
                    }).catch(()=>{
                        this.closeCrop();
                    });
                }
            },
            // 关闭裁剪框
            closeCrop: function () {
                this.$emit('closeImgCrop', false);
            },
            handleJcrop: function () {
                let jcrop_api,
                    boundx,
                    boundy,

                    xsize = this.curCropW,
                    ysize = this.curCropH;

                $('#targetImg').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    aspectRatio: xsize / ysize
                }, function() {
                    let bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                });

                let that = this;
                function updatePreview(c) {
                    if (parseInt(c.w) > 0) {
                        let rx = xsize / c.w;
                        let ry = ysize / c.h;
                        that.startX = c.x;
                        that.startY = c.y;
                        that.imgWidth = c.w;
                        that.imgHeight = c.h;
                    }
                };
            }
        },
        mounted: function () {
            let img = new Image();
            img.src = this.oldImg;
            if ( img.width/img.height > 4/3 ) {
                $('#targetImg').width(400);
                this.ratio = img.width/400;
            } else {
                $('#targetImg').height(300);
                this.ratio = img.height/300;
            }
            setTimeout(()=>{
                this.handleJcrop();
            },500);
        }
    }
</script>
<style lang="scss">
    @import '../../../static/css/common.scss';
	@import "imgCrop";
</style>
